<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vlog剪辑工具</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.ico">
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <header class="header">
            <div class="container">
                <h1 class="logo">Vlog剪辑工具</h1>
                <p class="subtitle">轻松制作专业视频</p>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 片头选择区域 -->
            <section class="intro-section">
                <h2 class="section-title">片头选择</h2>
                <p class="section-subtitle">选择您喜欢的片头风格</p>
                <div class="intro-grid">
                    <div class="intro-item" data-intro="intro1">
                        <div class="intro-preview">
                            <i class="fas fa-play-circle"></i>
                        </div>
                        <h3>简约风格</h3>
                    </div>
                    <div class="intro-item" data-intro="intro2">
                        <div class="intro-preview">
                            <i class="fas fa-play-circle"></i>
                        </div>
                        <h3>动感风格</h3>
                    </div>
                    <div class="intro-item" data-intro="intro3">
                        <div class="intro-preview">
                            <i class="fas fa-play-circle"></i>
                        </div>
                        <h3>复古风格</h3>
                    </div>
                    <div class="intro-item" data-intro="intro4">
                        <div class="intro-preview">
                            <i class="fas fa-play-circle"></i>
                        </div>
                        <h3>科技风格</h3>
                    </div>
                </div>
            </section>

            <!-- 成片模板区域 -->
            <section class="template-section">
                <h2 class="section-title">成片模板</h2>
                <p class="section-subtitle">选择合适的视频模板</p>
                <div class="template-grid">
                    <div class="template-item" data-template="template1">
                        <div class="template-preview">
                            <i class="fas fa-video"></i>
                        </div>
                        <h3>旅行日记</h3>
                    </div>
                    <div class="template-item" data-template="template2">
                        <div class="template-preview">
                            <i class="fas fa-video"></i>
                        </div>
                        <h3>美食分享</h3>
                    </div>
                    <div class="template-item" data-template="template3">
                        <div class="template-preview">
                            <i class="fas fa-video"></i>
                        </div>
                        <h3>生活记录</h3>
                    </div>
                    <div class="template-item" data-template="template4">
                        <div class="template-preview">
                            <i class="fas fa-video"></i>
                        </div>
                        <h3>学习笔记</h3>
                    </div>
                </div>
            </section>

            <!-- 操作按钮区域 -->
            <div class="action-buttons">
                <button class="btn btn-secondary" id="preview-btn">
                    <i class="fas fa-eye"></i>
                    <span>预览效果</span>
                </button>
                <button class="btn btn-primary" id="save-work-btn">
                    <i class="fas fa-save"></i>
                    <span>保存作品</span>
                </button>
            </div>
        </main>

        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="/" class="nav-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="/profile" class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <!-- 模态框 -->
    <div class="modal" id="save-work-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>保存作品</h3>
                <button class="modal-close" onclick="closeSaveWorkModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="work-name">作品名称</label>
                    <input type="text" id="work-name" placeholder="请输入作品名称" required>
                </div>
                <div class="form-group">
                    <label for="work-description">作品描述</label>
                    <textarea id="work-description" placeholder="请输入作品描述（可选）" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeSaveWorkModal()">
                    <span>取消</span>
                </button>
                <button class="btn btn-primary" onclick="confirmSaveWork()">
                    <span>保存</span>
                </button>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/userManager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>